import React, { useState, useEffect, lazy, Suspense } from 'react'
import { useHistory, Link, Redirect, Route, Switch } from 'react-router-dom';
import { Layout, Button, Menu } from 'antd';
import styles from './style.module.scss'
import logo from '../../assets/logo192.png'
import { getMenus } from '../../api';
import { TOKEN } from '../../constan';
import { iconObj } from '../../constan/home';
import {
  ContainerOutlined,
} from '@ant-design/icons';
import Welcome from '../Welcome/Welcome';
import Goods from '../Goods';

const User = lazy(() => import('../User/index'))
const Rights = lazy(() => import('../Rights'))
const Roles = lazy(() => import('../Roles'))
const Params = lazy(() => import('../Params'))
const Reports = lazy(() => import('../Report'))
const Orders = lazy(() => import('../Order'))
const Categories = lazy(() => import('../Categories'))




const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;
export default function Home() {
  // menuList: [],
  //   iconObj: {
  //   125: 'iconfont icon-user',
  //     103: 'iconfont icon-tijikongjian',
  //       101: 'iconfont icon-shangpin',
  //         102: 'iconfont icon-danju',
  //           145: 'iconfont icon-baobiao'
  // },
  // isCollapse: false,
  //   activePath: ''
  const history = useHistory();
  const [menuList, setMenuList] = useState([]);
  const [isCollapse, setColllapse] = useState(false);


  const user = JSON.parse(localStorage.getItem(TOKEN) || '{}')
  if (!user.token) {
    history.push('/login')
  }
  useEffect(() => {
    getMenuList()
  }, [])
  const logout = () => {
    localStorage.removeItem(TOKEN);
    history.push('/login');
  }

  const getMenuList = async () => {
    const res = await getMenus();
    if (res) {
      setMenuList(res)
    }
  }
  const renderMenus = (v) => {

    if (v.children.length) {
      return <SubMenu key={v.id} icon={<i className={iconObj[v.id]}></i>} title={v.authName}>
        {
          v.children.map(v => renderMenus(v))
        }
      </SubMenu>
    } else {
      return <Menu.Item key={v.id} icon={<ContainerOutlined />}>
        <Link to={'/' + v.path} >  {
          v.authName
        }</Link>
      </Menu.Item>
    }
  }




  return (
    <Layout className={styles.home}>
      <Header className={styles.header}>
        <div>
          <img src={logo} alt="" />
          <h1>商城后台管理系统
          </h1>
        </div>
        <Button type='primary' onClick={logout}>退出</Button>
      </Header>
      <Layout>
        <Sider width='200' collapsed={isCollapse} className={styles.aside}>
          <div className={styles.toggleBtn} onClick={() => setColllapse(!isCollapse)}>|||</div>
          <Menu
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            mode="inline"
            theme="dark"
            inlineCollapsed={isCollapse}
          >
            {
              menuList.map(v => renderMenus(v))
            }
          </Menu>
        </Sider>
        <Content className={styles.main}>

          <Suspense fallback={null} >
            <Switch>
              <Route exact path='/' component={Welcome} />
              <Route path='/users' component={User} />
              <Route path='/rights' component={Rights} />
              <Route path='/goods' component={Goods} />
              <Route path='/roles' component={Roles} />
              <Route path='/params' component={Params} />
              <Route path='/reports' component={Reports} />
              <Route path='/orders' component={Orders} />
              <Route path='/categories' component={Categories} />
              <Redirect to='/' />
            </Switch>
          </Suspense>

        </Content>
      </Layout>

    </Layout>

  )
}
